<template>
  <div>
    <div>
      <span style="font-size:16px;margin:20px"> 商品分类</span>
      <el-divider></el-divider>
    </div>

    <el-row class="inp">
      <el-col :xs="24" :sm="12" :md="8">
        <el-select
          size="small"
          clearable
          v-model="classify_shop"
          placeholder="请选择"
          @change="shopChange"
        >
          <el-option
            :label="v.cate_name"
            :value="v.id"
            v-for="(v, i) in listData"
            :key="i"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-select
          size="small"
          clearable
          v-model="classify_status"
          placeholder="请选择"
          @change="statusChange"
        >
          <el-option label="显示" value="1"></el-option>
          <el-option label="隐藏" value="0"></el-option>
        </el-select>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-input
          placeholder="请输入"
          v-model="filter_name"
          size="small"
          suffix-icon="el-icon-search"
          @input="search"
        >
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :sm="12" :md="8">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="open"
          size="small"
          >添加分类</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="380"
          v-loading="loading"
        >
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="" prop="cate_name" type="expand">
            <template slot-scope="scope">
              <div>
                <el-table
                  fit
                  :data="scope.row.children"
                  style="width: 100%"
                  :show-header="false"
                  size="small"
                >
                  <el-table-column label="" prop="id"> </el-table-column>
                  <el-table-column label="" prop="cate_name"> </el-table-column>
                  <el-table-column label="">
                    <template slot-scope="scope">
                      <img
                        alt="error"
                        :src="scope.row.pic"
                        style="width: 100px; height: 100px"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="" prop="sort"> </el-table-column>
                  <el-table-column label="" prop="is_show">
                    <template slot-scope="scope">
                      <Sw
                        :isShow="scope.row.is_show"
                        :editId="scope.row.id"
                        @switchChange="switchChange"
                      ></Sw>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="handleClick({ ...scope.row })"
                        type="text"
                        size="small"
                        >编辑</el-button
                      >
                      <el-button
                        type="text"
                        size="small"
                        @click="classifyDel(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类名称" prop="cate_name"> </el-table-column>

          <el-table-column label="分类图标">
            <template slot-scope="scope">
              <img
                alt="error"
                :src="scope.row.pic"
                style="width: 100px; height: 100px"
              />
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="sort"> </el-table-column>
          <el-table-column label="状态" prop="is_show">
            <template slot-scope="scope">
              <Sw
                :isShow="scope.row.is_show"
                :editId="scope.row.id"
                @switchChange="switchChange"
              ></Sw>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click="handleClick({ ...scope.row })"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="classifyDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <span slot="title" class="dialog-title">
        <i class="el-icon-question"></i>
        删除商品分类
      </span>
      <span>确定要删除商品分类吗？ 删除商品分类后将无法恢复，请谨慎操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDel">确 定</el-button>
      </span>
    </el-dialog>

    <Model :form="form" @finish="finish" />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {
  getClassifyList,
  delClassifyList,
  switchEdit,
  confirmAdd,
  editClassify,
  configEdit,
} from "../api";
import Model from "../components/Model";
import Sw from "../components/Sw";
export default {
  name: "classify",
  components: { Model, Sw },
  name: "Home",
  data() {
    return {
      dialogVisible: false,
      filter_name: "",
      classify_shop: "",
      classify_status: "",
      tableData: [],
      listData: [],
      delId: "",
      loading: false,
      num: 0,
      form: {
        formDialogVisible: false,
        cate_name: "",
        id: "",
        is_show: "",
        pic: "",
        sort: "",
      },
    };
  },

  methods: {
    shopChange() {
      this.getData();
    },
    statusChange() {
      this.getData();
    },
    search() {
      this.getData();
    },
    open() {
      this.form = {
        formDialogVisible: true,
        cate_name: "",
        id: "",
        pic: "",
        sort: "",
        is_show: 0,
      };
      this.form.formDialogVisible = true;
    },
    handleClick(row) {
      delete row.add_time;
      delete row.children;
      this.form.cate_name = row.cate_name;
      this.form.id = row.id;
      this.form.is_show = row.is_show;
      this.form.pic = row.pic;
      this.form.sort = row.sort;
      this.form.pid = row.pid;
      this.form.formDialogVisible = true;
      // editClassify(this.form.id).then((res) => {
      //   console.log(res.data.data);
      // });
    },
    classifyDel(val) {
      this.delId = val.id;
      this.dialogVisible = true;
    },
    confirmDel() {
      delClassifyList(this.delId).then((res) => {
        this.dialogVisible = false;
        this.getData();

        this.$message({ type: "error", message: res.data.msg });

        this.dialogVisible = false;
      });
    },
    switchChange(val) {
      this.loading = true;
      const { id, is_show } = val;
      switchEdit({ id, is_show }).then((res) => {
        this.getData();
      });
    },
    getData() {
      this.loading = true;
      getClassifyList({
        page: 1,
        limit: 5,
        is_show: this.classify_status,
        cate_name: this.filter_name == "" ? "" : this.filter_name,
        pid: this.classify_shop,
      }).then((res) => {
        if (res.data.status == 200) {
          this.tableData = res.data.data.list;
          this.num += 1;
          console.log(this.tableData);
          if (this.num == 1) {
            this.listData = this.tableData;
          }
        } else {
          this.$router.push("/login");
          localStorage.removeItem("token");
        }
        this.loading = false;
      });
    },
    finish(e) {
      if (e.id != "") {
        configEdit({
          cate_name: e.cate_name,
          sort: e.sort,
          is_show: e.is_show,
          pid: e.pid,
          pic: e.pic,
          id: e.id,
        }).then((res) => {
          this.getData();

          this.form.formDialogVisible = false;
        });
      } else {
        confirmAdd({
          cate_name: e.cate_name,
          sort: e.sort,
          is_show: e.is_show,
          pid: e.pid,
          pic: e.pic,
        }).then((res) => {
          this.getData();

          this.form.formDialogVisible = false;
        });
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style>
.inp {
  padding: 10px;
  box-sizing: border-box;
}

.el-table__expanded-cell[class*="cell"] {
  padding: 0 !important;
}
</style>
<style lang="scss" scope>
.el-col-8 {
  padding: 20px;
  box-sizing: border-box;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
th,
td {
  text-align: center !important;
  vertical-align: middle !important;
}
</style>
